<template>
  <view class="search-container">

    <view class="my-search-bar">
      <uni-search-bar @input="searchTextChanged" cancelButton="none" :radius="100" />
    </view>

    <!-- 搜索历史 -->
    <view class="history-box" v-if="suggestList.length === 0">
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="16" @click="cleanHistory()"></uni-icons>
      </view>
      <view class="history-list">
        <uni-tag :text="item" v-for="(item, i) in history" :key="i" @click="gotoGoodsList(item)"></uni-tag>
      </view>
    </view>

    <!-- 搜索建议列表 -->
    <view class="sugg-list" v-else>
      <view class="sugg-item" v-for="(item, i) in suggestList" :key="i" @click="gotoGoodsDetail(item.goods_id)">
        {{item.goods_name}}
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 搜索关键字
        kw: '',
        // 延时器的 id
        timer: null,
        // 搜索建议列表
        suggestList: [],
        // 搜索历史记录
        historyList: []
      }
    },
    onLoad() {
      this.historyList = JSON.parse(uni.getStorageSync('search_history') || '[]')
    },
    methods: {
      // 搜索内容改变的事件处理函数
      searchTextChanged(e) {
        this.kw = e.value
        // 清楚旧的延时器
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.getSuggestList()
        }, 500)
      },
      // 获取搜索建议列表
      async getSuggestList() {
        // 如果关键字 trim 之后为空，则不发起请求
        if (this.kw.trim().length === 0) return this.suggestList = []
        const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.kw })
        if (res.meta.status !== 200) return uni.$showError()
        this.suggestList = res.message
        this.saveToStorage()
      },
      saveToStorage() {
        this.historyList.unshift(this.kw)
        const arr = Array.from(new Set(this.historyList))
        uni.setStorageSync('search_history', JSON.stringify(arr))
      },
      // 点击 tag，跳转到商品列表页面
      gotoGoodsList(kw) {
        uni.navigateTo({
          url: '/packageGoods/goods_list/goods_list?query=' + kw
        })
      },
      // 点击搜索建议，跳转到商品详情页面
      gotoGoodsDetail(id) {
        uni.navigateTo({
          url: '/packageGoods/goods_detail/goods_detail?goods_id=' + id
        })
      },
      // 清空搜索历史
      cleanHistory() {
        this.historyList = []
        uni.setStorageSync('search_history', '[]')
      }
    },
    computed: {
      history() {
        const arr = Array.from(new Set(this.historyList))
        return arr
      }
    }
  }
</script>

<style lang="scss">
  .search-container {
    .history-box {
      padding-left: 15px;

      .history-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px 10px 0;
        font-size: 13px;
        border-bottom: 1px solid #efefef;
      }

      .history-list {
        display: flex;
        flex-wrap: wrap;

        uni-tag {
          margin: 10px 10px 0 0;
        }
      }
    }
  }

  .sugg-list {
    padding-left: 15px;

    .sugg-item {
      border-top: 1px solid #efefef;
      font-size: 12px;
      padding: 10px;
      padding-left: 0;
      color: #3C3E49;
    }
  }

  .my-search-bar {
    position: sticky;
    top: 0;
  }
</style>
